import React from 'react';
import { Layout } from 'antd';

const { Header } = Layout;
import Menushrink from './Menushrink';
import Breadcrumb from './Breadcrumb';
import styles from '../../index.module.scss';
import NavUser from './NavUser';
import Logo from './Logo';
import { useStateThemeConfig } from '/@/store/hooks/theme';
export default function NavBar(props: { className?: string; style?: object; menus?: any }) {
  let { className, style, menus } = props;
  let { IsCrumbs, layout, IsLogo } = useStateThemeConfig();
  const IsLeftMb = () => {
    if (layout === 'default') {
      return (
        <div className={styles.layout_navbars_breadcrumb}>
          <Menushrink />
          {IsCrumbs && <Breadcrumb />}
        </div>
      );
    }
    return (
      <div className={styles.layout_navbars_breadcrumb}>
        {IsLogo && <Logo color='var(--squidwest-color-fontsizecolor)'></Logo>}
      </div>
    );
  };
  return (
    <Header className={className} style={style}>
      <IsLeftMb></IsLeftMb>
      {menus && <div style={{ flex: '1' }}>{menus}</div>}
      <div className={styles['layout_navbars_user']} style={menus ? {} : { flex: '1' }}>
        <NavUser></NavUser>
      </div>
    </Header>
  );
}
